<template>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <Row>
            <Col span="8" offset="8">
                <FormItem label="上级栏目" prop="parent_id">
                    <Select v-model="formValidate.parent_id">
                        <Option v-for="item in categoryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="8" offset="8">
                <FormItem label="栏目名称" prop="category_name">
                    <Input v-model="formValidate.category_name" placeholder="请输入栏目名称"></Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="8" offset="8">
                <FormItem label="栏目描述" prop="category_desc">
                    <Input v-model="formValidate.category_desc" type="textarea" placeholder="请输入栏目描述"></Input>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="8" offset="8">
                <FormItem label="是否显示" prop="category_status">
                    <Select v-model="formValidate.category_status" placeholder="是否显示">
                        <Option v-for="item in categoryStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="8" offset="8">
                <FormItem label="显示时间">
                    <Row>
                        <Col span="24">
                        <FormItem prop="date">
                            <DatePicker type="datetime" @on-change="changeDate" placeholder="不选代表立即生效" v-model="formValidate.category_show_time"></DatePicker>
                        </FormItem>
                        </Col>
                    </Row>
                </FormItem>
            </Col>
        </Row>
        <Row>
            <Col span="8" offset="8">
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">修改</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Col>
        </Row>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formValidate: {
                    name: '',
                    category_name: '',
                    category_status: '',
                    category_show_time: '',
                    category_desc: '',
                    parent_id: ''
                },
                ruleValidate: {
                    parent_id: [
                        { type: "number", required: true, message: '请选择上级栏目', trigger: 'blur' }
                    ],
                    category_name: [
                        { required: true, message: '请输入栏目名称', trigger: 'blur' },
                    ],
                    category_status: [
                        { type: "number", required: true, message: '请选择栏目是否显示', trigger: 'blur' }
                    ]
                },
                // 栏目列表
                categoryList: [],
                // 是否显示
                categoryStatusList: [
                    {
                        value: 1,
                        label: '是'
                    },
                    {
                        value: 0,
                        label: '否'
                    }
                ],
            }
        },
        methods: {
            // 将时间改为本地时间
            changeDate(date){
                //这里的date就是我们想要的本地时间
                this.formValidate.category_show_time = date;
            },
            handleSubmit (name) {
                let _this = this;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        _this.editCategory();
                    } else {
                        //this.$Message.error('请选择!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            // 获取栏目
            getCategory: function() {
                let _this = this
                this.$http.post(
                    '/api/v1/category'
                )
                .then(function(response) {
                    _this.categoryList = response.data.content;
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            // 根据cate_id获取单个栏目
            getSingleCate: function () {
                let _this = this
                this.$http.post(
                    '/api/v1/singleCate',
                    {
                        cateId: _this.$route.params.id
                    }
                )
                .then(function(response) {
                    _this.formValidate.parent_id = response.data.content.parent_id;
                    _this.formValidate.category_name = response.data.content.category_name;
                    _this.formValidate.category_desc = response.data.content.category_desc;
                    _this.formValidate.category_status = response.data.content.category_status;
                    _this.formValidate.category_show_time = response.data.content.category_show_time;
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            // 编辑栏目
            editCategory: function () {
                let _this = this;
                this.$http.post(
                    '/api/v1/article/editCategory',
                    {
                        id: _this.$route.params.id,
                        parent_id:_this.formValidate.parent_id,
                        category_name:_this.formValidate.category_name,
                        category_desc:_this.formValidate.category_desc,
                        category_status: _this.formValidate.category_status,
                        category_show_time: _this.formValidate.category_show_time
                    }
                )
                .then(response => {
                    if (response.data.code === 0) {
                        this.$Message.success({
                            content: response.data.message,
                            top: 50,
                            duration: 2,
                            onClose: function () {
                                _this.$router.push({path: '/index/article_column'});
                            }
                        });
                    } else {
                        console.log(response.data)
                        this.$Message.error({
                            content: response.data.message,
                            duration: 2
                        });
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        },
        mounted: function () {
            this.getCategory();
            this.getSingleCate();
        }
    }
</script>
